<template>
  <view class="no-data">
    <view class="box" :style="boxStyle">
      <view class="icon">
        <image
          :src="getIcon"
          :style="imageStyle"
          mode="widthFix"
          class="image"
        />
      </view>

      <view class="title">{{ title }}</view>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV1, imgBaseUrlV2 } from "@/common/config";
let def = "no_xiaoxi";
const noXinHao = require("../../../static/images/no_xinhao.png");
export default {
  props: {
    status: {
      type: String,
      default: def,
    },
    title: {
      type: String,
      default: "暂无信息",
    },
    boxStyle: {
      default: "",
    },
    imageStyle: {
      default: "",
    },
    icons: {
      type: Object,
      default() {
        let obj = {
          no_xiaoxi: {
            icon: imgBaseUrlV1 + "no_xiaoxi2x.png",
          },
          no_xinhao: {
            icon: noXinHao,
          },
          no_order: {
            icon: imgBaseUrlV1 + "no_order2x.png",
          },
          no_shebei: {
            icon: imgBaseUrlV1 + "no_shebei2x.png",
          },
          no_shebei2: {
            icon: imgBaseUrlV1 + "no_shebei2.png",
          },
          no_sku: {
            icon: imgBaseUrlV1 + "no_sku.png",
          },
          deviceGood: {
            icon: imgBaseUrlV2 + "kaikuang_no.png",
          },
        };
        return obj;
      },
    },
  },
  computed: {
    getIcon() {
      let item = this.icons[this.status];
      if (!item) {
        item = this.icons[def];
      }
      return item ? item.icon : "";
    },
  },
};
</script>

<style lang="stylus" scoped>
.no-data {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;

  >.box {
    margin-bottom: 80rpx;

    >.icon {
      >.image {
        display: block;
        width: 420rpx;
        margin: 0 auto 30rpx;
      }
    }

    >.title {
      text-align: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
}
</style>